<route>
    {
        meta: {
            layout: 'index',
            title:'公告管理'
        }
    }  
</route>
<template>
  <view>
    <a-row>
      <a-select v-model:value="searchKey" show-search placeholder="请输入名称"
        style="width: 200px; margin-bottom: 10px; margin-right: 15px" :options="options"
        :filter-option="filterOption"></a-select>

      <a-button type="primary" style="margin-bottom: 10px; width: 80px; margin-right: 50px" @click="onSearch()">
        <template #icon>
          <SearchOutlined />
        </template>搜索
      </a-button>

      <a-button type="primary" style="margin-bottom: 10px; width: 80px" @click="add">
        <template #icon> <plus-outlined /> </template>新增
      </a-button>
    </a-row>

    <a-card style="padding: 0px 25px 0px 25px">
      <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">
        <template #renderItem="{ item }">
          <a-list-item key="item.title">
            <template #actions>
              <div style="margin-right: 8px">
                <span>
                  <AntdZh>
                    <a-popconfirm title="确定删除该条记录 ?" @confirm="del(item.id)">
                      <a-button type="link" danger>
                        <DeleteOutlined />
                      </a-button>
                    </a-popconfirm>
                  </AntdZh>
                </span>
              </div>
            </template>
            <template #extra>
              <img width="272" alt="logo" :src="`/dev-api/ufs/download/${item.fileId}`" />
            </template>
            <a-list-item-meta :title="item.title">
              <template #description>
                <span>
                  <a-tag color="green">{{ item.type }}</a-tag>
                </span>

                <a :href="item.href">{{ item.description }}</a>
              </template>
            </a-list-item-meta>
            {{ item.content }}
          </a-list-item>
        </template>
      </a-list>
    </a-card>

    <AntdConfirmModal title="新增公告" ref="modalRef" width="600px" :keepSlot="false" @confirm="submitForm">
      <a-form :model="form" name="basic" :label-col="{ span: 5 }">
        <a-row>
          <a-col :span="20">
            <a-form-item label="标题" name="title">
              <a-input v-model:value="form.title" style="width: 400px" placeholder="请输入标题" />
            </a-form-item>
          </a-col>
          <a-col :span="20">
            <a-form-item label="链接" name="content">
              <a-input v-model:value="form.content" style="width: 400px" placeholder="请输入链接" />
            </a-form-item>
          </a-col>
          <a-col :span="20">
            <a-form-item label="分类" name="type">
              <a-select show-search placeholder="请选择分类" v-model:value="form.type" style="width: 400px"
                :options="classify"></a-select>
            </a-form-item>
          </a-col>
          <a-col :span="20">
            <a-form-item label="排序" name="orderNumr">
              <a-input-number v-model:value="form.orderNum" style="width: 400px" :min="0" />
            </a-form-item>
          </a-col>
          <a-col :span="20">
            <a-form-item label="上传图片" name="image">
              <a-upload v-model:file-list="fileList" :withCredentials="true" :max-count="1" action="/dev-api/ufs/upload" list-type="picture"
                class="upload-list-inline" @change="uploadHook">
                <a-button style="width: 200px"> <upload-outlined />upload </a-button>
              </a-upload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </AntdConfirmModal>
  </view>
</template>
<script setup>
import {
  PlusOutlined,
  UploadOutlined,
  FormOutlined,
  DeleteOutlined,
  SearchOutlined,
} from "@ant-design/icons-vue";
import { createOne, queryList, deleteOne } from "@/custom/pms/api/notices";
import useApp from "@/hooks";
const { $, proxy } = useApp();
// const editableData = reactive({});
const modalRef = ref(null);
// const title = ref(null);
const listData = ref([]);
const form = ref({
  title: "",
  content: "",
  image: "",
  type: "",
  orderNum: 0,
  fileId:'',
});
const query = ref({ pageNum: 1, pageSize: 10, sortBy: "orderNum" });
const fileList = ref([]);
const classify = ref([
  { value: 'default', label: "默认" },
]);

// 上传监听
function uploadHook(e) {
  if (e.file.status == 'done' || e.file.status == 'removed') {
        fileList.value = fileList.value.map(ele=>{
          if($.extName(ele.name) in ['pdf','doc','docx','zip']){
            ele.thumbUrl = '/files/' + $.extName(ele.name) + '.svg'
          }
            form.value.fileId =  ele.response?.data.id;
            return ele;
        })
    }
}
// for (let i = 0; i < 5; i++) {
//     listData.value.push({
//         href: 'https://www.antdv.com/',
//         title: `标题 ${i}`,
//         description: 'Ant Designis refined by Ant UED Team.',
//         content: 'We supply a series of design principles',
//         classify: '分类1'
//     });
// }
const pagination = {
  onChange: (page) => {
    console.log(page);
  },
  pageSize: 3,
};
// 删除
const del = (key) => {
  deleteOne(key).then((res) => {
    $.showToast({
      title: "删除成功",
      icon: "success",
    });
    getList();
    // delete editableData[key];
  });
};
//编辑
// function editItem(e) {
//     form.value = e
//     title.value = false
//     modalRef.value.openModal()
// }
// 保存
// const save = key => {
//     delete editableData[key];
// };
// 取消
// const cancel = key => {
//     delete editableData[key];
// };
// 新增
function add() {
  // title.value = true
  form.value = {};
  modalRef.value.openModal();
}
// 提交
function submitForm() {
  createOne(form.value).then((res) => {
    console.log(res);
    modalRef.value.closeModal();
    getList();
  });
}
// 搜索
function onSearch() { }
// 查询列表
function getList() {
  queryList(query.value).then((res) => {
    console.log("getList", res.content);
    listData.value = res.content;
  });
}
getList();
</script>
<style scoped>
/* tile uploaded pictures */

.upload-list-inline :deep(.ant-upload-list-item) {
  float: left;
  width: 200px;
  margin-right: 8px;
}

.upload-list-inline [class*="-upload-list-rtl"] :deep(.ant-upload-list-item) {
  float: right;
}
</style>
